<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="pic-box">
			<!-- <image :src='imageUrl+pic' mode="widthFix"></image> -->
			<image :src="path" mode="widthFix"></image>
			<l-painter ref="painter" custom-style="position: fixed; left: 200%" />
			<view class="btn" @click="savePosterPath">保存图片</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '推广给朋友',
					'color': false,
				},
				imageUrl: this.imageUrl,
				topPic: '',
				code: '',
				path: '',
				poster: ""
			}
		},
		onLoad(option) {
			this.getInviteQrcode();
			this.topPic = option.pic;
			this.avatar = option.avatar;
			this.nickname = option.nickname;
			console.log(this.topPic)

		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async getInviteQrcode() {
				const res = await this.$myRequest({
					url: '/api/user/getInviteQrcode',
					data: {
						openid: uni.getStorageSync('openid')
					}
				})
				console.log(res.data)
				this.code = res.data.data;
				var poster = {
					css: {
						width: "660rpx",
						overflow: "hidden",
						background: "#ffffff",
					},
					views: [{
						css: {
							padding: "0",
							boxSizing: "border-box",
							background: "#fff",
							width: "660rpx",
						},
						views: [{
							src: this.topPic,
							type: "image",
							css: {
								objectFit: "cover",
								width: "660rpx",
								height: "800rpx"
							},
						}, {
							css: {
								marginTop: "30rpx",
								// paddingLeft: "40rpx",
								// marginBottom: "30rpx",
								width: "660rpx",
								height: "189rpx",
								position: "relative",
								background: "#fff",
							},
							views: [{
									src: 'https://dsby.hearoommed.com/template/poster_bottom.jpg',
									type: "image",
									css: {
										objectFit: "cover",
										width: "660rpx",
										height: "189rpx",
										
									},
								}, {
									type: "view",
									css: {
										marginTop: "30rpx",
										paddingRight: "30rpx",
										display: "inline-block",
										position: "absolute",
										left:'20rpx',
										top:'30rpx',
									},
									views: [{
											text: '去医院 专人陪',
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												color: "#333333",
												fontSize: "28rpx"
											}
										},
										{
											text: "更放心 更省心",
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												color: "#333333",
												fontSize: "28rpx"
											},
										},
									],
								},
								{
									text: "扫码进入袋鼠伴佑",
									type: "text",
									css: {
										// marginTop: "50rpx",
										// paddingRight: "30rpx",
										// display: "inline-block",
										color: "#333333",
										fontSize: "28rpx",
										position: "absolute",
										left:'220rpx',
										top:'80rpx',
									}
								}, {
									src: this.imageUrl + this.code,
									type: "image",
									css: {
										width: "128rpx",
										height: "128rpx",
										position: "absolute",
										right:'70rpx',
										top:'30rpx',
										borderRadius: '50%',
									},

								}
							],
							type: "view"
						}],
						type: "view"
					}]
				}
				uni.showLoading({
					title: '海报生成中'
				})

				this.painter(poster)
			},
			painter(poster) {
				// 渲染
				this.$refs.painter.render(poster);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						this.path = res.tempFilePath;
						uni.hideLoading()

					},
				});
			},

			//下载海报，只在APP内有效
			down() {
				uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
					filePath: this.path, //图片文件路径
					success: function() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none',
						});
						uni.hideLoading()
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none',
						});
						uni.hideLoading()
					}
				});

			},

			savePosterPath() {
				var that = this;
				uni.showLoading({
					title: '正在保存图片...'
				});
				//获取用户的当前设置。获取相册权限
				uni.getSetting({
					success: (res) => {
						//如果没有相册权限
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							//向用户发起授权请求
							uni.authorize({
								scope: "scope.writePhotosAlbum",
								success: () => {
									//授权成功保存图片到系统相册
									that.down()
								},
								//授权失败
								fail: () => {
									uni.hideLoading();
									uni.showModal({
										title: "您已拒绝获取相册权限",
										content: "是否进入权限管理，调整授权？",
										success: (res) => {
											if (res.confirm) {
												//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													},
												});
											} else if (res.cancel) {
												return uni.showToast({
													title: "已取消！",
												});
											}
										},
									});
								},
							});
						} else {
							//如果已有相册权限，直接保存图片到系统相册
							that.down()
						}
					},
					fail: (res) => {},
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pic-box {
		width: 100%;
		padding: 30rpx;
		padding-top: 100rpx;
	}

	.pic-box image {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 60rpx;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
